<template>
  <div class="hid_window app-container">
    <div class="search-container" ref="search">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="flexRow">
            <span style="width: 100px">点位名称</span>
            <el-input size="default" v-model="seacrForm.point_name"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="flexRow">
            <span style="width: 100px">隐患等级</span>
            <el-select size="default" v-model="seacrForm.danger_level" placeholder="请选择">
              <el-option v-for="item in dangerLevelOptions" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="flexRow">
            <span style="width: 100px">隐患状态</span>
            <el-select size="default" v-model="seacrForm.status" placeholder="请选择">
              <el-option v-for="item in dangerStatusOptions" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="5">
          <el-button size="default" class="searchBtn" type="primary" @click="getDataList">搜索</el-button>
          <el-button size="default" type="warning" @click="refreshBtn">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-card shadow="never">
      <template #header>
        <el-button size="default" type="primary" @click="hanldeDelete">批量删除</el-button>
        <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
        <div class="red">
          <div>
            《中华人民共和国消防法》第十七条规定，消防安全重点单位除应当履行本法第十六条规定的职责外，还应当履行下列消防安全职责：（三）实行每日防火巡查，并建立巡查记录。《机关、团体、企业、事业单位消防安全管理规定》消防安全重点单位应当进行每日防火巡查，并确定巡查的人员、内容、部位和频次。公众聚集场所在营业期间的防火巡查应当至少每二小时一次；营业结束时应当对营业现场进行检查，消除遗留火种。
          </div>
        </div>
      </template>
      <el-table
        @selection-change="handleSelectionChange"
        :height="pageHeight + 'px'"
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'id', order: 'ascending' }"
        v-loading="tableDataLoading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="点位名称" prop="point_name"> </el-table-column>
        <el-table-column label="隐患等级" prop="danger_level"> </el-table-column>
        <el-table-column label="隐患位置" prop="address"> </el-table-column>
        <el-table-column label="隐患来源" prop="danger_source" :formatter="hiddenDangerFrom"> </el-table-column>
        <el-table-column label="隐患描述" prop="check_remark"> </el-table-column>
        <el-table-column label="隐患状态" prop="status" :formatter="hiddenDangerStatus"> </el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-button size="default" @click="checkDanger(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          layout="prev, pager, next, jumper"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div> -->
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="pagination.page"
          :total="total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          class="pagination"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
// 分页
import paginationMixin from '@/mixins/pagination'
export default {
  props: ['isDialog'],
  // 分页
  mixins: [paginationMixin],
  data() {
    return {
      // 总页数
      total: 0,
      tableData: [],
      tableDataLoading: false,
      search: '',
      tableDataInfo: '',
      searchValue: '',
      dangerLevelOptions: ['重大隐患', '一般隐患'],
      dangerStatusOptions: [
        {
          key: 1,
          label: '未整改'
        },
        {
          key: 2,
          label: '待审核'
        },
        {
          key: 3,
          label: '已整改'
        }
      ],
      seacrForm: {
        point_name: '',
        danger_level: '',
        status: ''
      },
      pageHeight: 0,
      ids: []
    }
  },
  created() {
    this.getDataList()
  },
  mounted() {
    this.pageHeight = window.innerHeight - this.$refs.search.clientHeight - 285
  },
  methods: {
    onDownExcel() {
      this.$api
        .post(
          '/unit/Danger/listsExcl',
          {
            rows: this.pagination.size,
            page: this.pagination.page,
            user_info: this.$store.state.user.user_info.region_id,
            keywords: this.searchValue,
            ...this.seacrForm
          },
          { responseType: 'blob' }
        )
        .then((res) => {
          const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
          })

          if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
          } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
          }
        })
    },
    hanldeDelete() {
      if (this.ids.length == 0) {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        })
        return
      }
      this.$confirm('你确定删除这些数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api
            .post('/unit/Danger/dels', {
              ids: this.ids
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getDataList()
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSelectionChange(row) {
      this.ids = row.map((item) => item.id)
    },
    refreshBtn() {
      let tempData = this.seacrForm
      for (let key in tempData) {
        tempData[key] = ''
      }
      this.seacrForm = tempData
      this.getDataList()
    },
    hiddenDangerFrom(row, column, cellValue, index) {
      let temp = ['', '公众', '监管机构', '维保单位', '社会单位']
      return temp[cellValue]
    },
    hiddenDangerStatus(row, column, cellValue, index) {
      let temp = ['', '未整改', '待审核', '已整改']
      return temp[cellValue]
    },
    getDataList(page) {
      this.tableDataLoading = true
      // 分页
      let query = {
        rows: this.pagination.size,
        page: this.pagination.page,
        user_info: this.$store.state.user.user_info.region_id,
        keywords: this.searchValue,
        ...this.seacrForm
      }
      this.$api
        .post('/unit/Danger/Lists', query)
        .then((res) => {
          this.tableData = res.data.list
          this.tableDataInfo = res.data
          this.total = res.data.total
        })
        .finally(() => {
          this.tableDataLoading = false
        })
    },
    // 搜索
    searchInputList() {
      this.getDataList()
    },
    handleSizeChange(e) {},
    handleCurrentChange(e) {
      this.getLists(e)
    },
    checkDanger(index, row) {
      if (!this.isDialog) {
        this.$router.push({
          name: 'hiddenDangerRecord',
          query: {
            id: row.id
          }
        })
      } else {
        this.$emit('showDetailDialog', row.id)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.block {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.flexRow {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.red{
    color: red;
    font-size: 14px;
    margin-top: 15px;
}
</style>
